<template>
  <div class="info-block home-section">
    <div class="block-tabs">
      <div
        v-for="item in tabsList"
        class="tab-item home-title"
        :class="{ 'is-active': item.name === activeName }"
        :key="item.name"
        @click="tabsClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="info-cards">
      <div v-for="item in currList" :key="item" class="card">
        <router-link
          :to="{
            name: 'SupplyDetail',
            query: { id: item.id, type: activeName },
          }"
          target="_blank"
        >
          <div class="card-title flex items-center justify-between">
            <div class="title-text">
              {{ item.supplyTitle || item.demandTitle }}
            </div>
            <div class="location">
              <img src="@/assets/location.svg" alt="" />
              {{ item?.provinceName }} {{ item?.cityName }}
            </div>
          </div>
          <div class="card-time">{{ item.createTime.slice(0, 10) }}</div>
        </router-link>
      </div>
    </div>
    <More :path="`/supply?type=${activeName}`" />
  </div>
</template>

<script setup>
import More from "./more.vue";

const tabsList = ref([
  { label: "供给信息", name: "supply" },
  { label: "需求信息", name: "demand" },
]);
const activeName = ref("supply");
const tabsClick = (item) => {
  activeName.value = item.name;
};

const $api = inject("$api");
const list = ref({
  demand: [],
  supply: [],
});
const currList = computed(() => list.value[activeName.value]);
const getList = async (key) => {
  const apiName = key === "supply" ? "getSupplyList" : "getDemandList";
  const { data: rows } = await $api.supply[apiName]({
    pageSize: 12,
    pageNum: 1,
    status: 1,
  });
  if (!Array.isArray(rows)) return;
  list.value[key] = rows;
};
watch(
  () => activeName.value,
  (val) => {
    if (!list.value[val]?.length) getList(val);
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="less">
.info-block {
  padding: 72px 0 48px;
  background: @bg-color;
  .block-tabs {
    margin-bottom: 70px;
    display: flex;
  }
  .tab-item {
    position: relative;
    cursor: pointer;

    &:last-child {
      margin-left: 54px;
    }
    &.is-active::after {
      content: "";
      position: absolute;
      bottom: -14px;
      left: calc(50% - 18px);
      width: 36px;
      height: 6px;
      background: @active-gradient;
    }
  }
}

.info-cards {
  width: @content-width;
  margin-bottom: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .card {
    box-sizing: border-box;
    width: 432px;
    margin-bottom: 16px;
    margin-right: 16px;
    background: #fff;
    padding: 16px 24px 22px 28px;
    border: 2px solid transparent;
    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.07);
    &:nth-child(3n) {
      margin-right: 0;
    }
    &:hover {
      border-image: linear-gradient(121deg, #0749f2 43%, #ff0d73 97%) 1.5;
      box-shadow: 0px 6px 10px 0px rgba(3, 39, 129, 0.2);
    }
    &-title {
      .title-text {
        font-size: 18px;
        font-weight: 500;
        color: @text-default;
      }
      .location {
        display: inline-flex;
        align-items: center;
        img {
          width: 13px;
          height: 15px;
          margin-right: 5px;
        }
        span {
          font-size: 16px;
          color: @text-light;
        }
      }
    }
    &-time {
      font-size: 14px;
      color: @text-light;
      margin-top: 15px;
    }
  }
}
</style>
